<template>
  <div id="box">
    <div id="form">
      <el-form ref="form" label-width="20px">
        <el-form-item>
          <p style="text-align: center; font-size:200%;padding:0%;font-weight: bolder">{{loginState}}</p>
        </el-form-item>

        <el-form-item>
          <el-input
            placeholder="请输入账号"
            v-model="username"
            clearable
          >
            <template slot="prepend">用户</template>
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-input placeholder="请输入密码" v-model="password" show-password>
            <template slot="prepend">密码</template>
          </el-input>
        </el-form-item>

        <el-form-item>
            <el-input placeholder="请输入验证码" v-model="checkCode" clearable style="width: 50%;float: left;padding-right: 10%" >
            </el-input>
          <div @click="refreshCode()">
            <s-identify :identifyCode="checkCode"></s-identify>
          </div>
        </el-form-item>

        <el-form-item>
          <div style="float: left;margin-left: 25%; margin-right: 15%">
            <el-button type="primary" @click="changeState()" style="width: 130%" >{{State}}</el-button>
          </div>

          <div style="float: left;margin-right: 10%;margin-top: 0%" >
            <el-button @click="commit()" style="width: 130%"  >{{loginState}}</el-button>
          </div>
        </el-form-item>
      </el-form>

      </div>
  </div>
</template>

<script>
import {
  login,
  register
} from '../../api/Login'
import SIdentify from '@/components/login/identify.vue'

import { Message } from 'element-ui'
export default {
  name: 'Login',
  data () {
    return {
      username: '',
      password: '',
      checkCode: '',
      Code: '',
      loginState: '登陆',
      State: '注册'
    }
  },
  methods: {
    changeState () {
      if (this.loginState === '登陆') {
        this.loginState = '注册'
        this.State = '登陆'
      } else {
        this.loginState = '登陆'
        this.State = '注册'
      }
    },
    commit () {
      var self = this
      const para = {
        username: this.username,
        password: this.password
      }
      if (this.loginState === '登陆' & this.State === '注册') {
        this.username = ''
        this.password = ''
        login(para).then(res => {
          Message({
            message: res.data,
            type: 'success',
            duration: 5 * 1000
          })
          self.$router.push('/main')
        })
      } else {
        this.username = ''
        this.password = ''
        register(para).then(res => {
          Message({
            message: res.data,
            type: 'success',
            duration: 5 * 1000
          })
        })
      }
    },
    refreshCode () {
      this.getRanNum()
    },
    getRanNum () {
      this.checkCode = ''
      var result = []
      for (var i = 0; i < 4; i++) {
        var ranNum = Math.ceil(Math.random() * 25) // 生成一个0到25的数字
        // 大写字母'A'的ASCII是65,A~Z的ASCII码就是65 + 0~25;然后调用String.fromCharCode()传入ASCII值返回相应的字符并push进数组里
        result.push(String.fromCharCode(65 + ranNum))
      }
      this.checkCode = result.join('')
    }
  },
  components: {
    SIdentify
  },
  mounted () {
    this.getRanNum()
    console.log(this.checkCode)
  }
}
</script>

<style scoped>
  #box, #form::before {
    position: absolute;
    width: 100%;
    height: 100%;
    background:url("../../assets/1213.png") no-repeat;
    background-size:cover;
  }
  #form {
    position: absolute;
    width: 20%;
    height: 45%;
    top: 30%;
    left: 65%;
    padding-left: 0%;
    padding-top: 1%;
    padding-right: 2%;
    color: #5cadff;
    border-radius: 20px;
    overflow: hidden;
    z-index: 2;
  }
  #form::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    filter: blur(10px);
    margin: -20px;
    z-index: -1;
  }
  #form div {
    padding-bottom: 3%;
  }
</style>
